<!DOCTYPE html>
<html lang="en">

<%@ page contentType="text/html; charset=utf-8"%>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Amaze UI Admin index Examples</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <script src="/assets/js/echarts.min.js"></script>
    <link rel="stylesheet" href="/assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="/assets/css/amazeui.datatables.min.css" />
    <link rel="stylesheet" href="/assets/css/app.css">
    <script src="/assets/js/jquery.min.js"></script>

</head>

<body data-type="index">
    <div class="am-g tpl-g">
        <!-- 头部 -->
        <jsp:include page="common/atmHead.jsp"></jsp:include>
        <!-- 风格切换 -->
        
        <!-- 侧边导航栏 -->
        <jsp:include page="common/atmLeft.jsp"></jsp:include>


        <!-- 内容区域 -->
        <div class="tpl-content-wrapper">

            <div class="row-content am-cf">
                <div class="row  am-cf">
                    
                    <div class="row">

                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <div class="widget am-cf">
                            <div class="widget-head am-cf">
                                <div class="widget-title am-fl">流水操作</div>
                                <div class="widget-function am-fr">
                                    <a href="javascript:;" class="am-icon-cog"></a>
                                </div>
                            </div>
                            <div class="widget-body am-fr">

                                <form id="flowForm" action="/flow/downLoadFlow.do" method="post" class="am-form tpl-form-line-form">

                                    <div class="am-form-group">
                                        <label for="cards" class="am-u-sm-3 am-form-label">银行卡 <span class="tpl-form-line-small-title"></span></label>
                                        <div class="am-u-sm-9">
                                            <select id="cards" name="cardId">
                                                <option value="no">请选择银行卡</option>
                                                <option value="b">622***009</option>
                                                <option value="o">622***007</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="am-form-group">
                                        <label for="password" class="am-u-sm-3 am-form-label">密码 <span class="tpl-form-line-small-title"></span></label>
                                        <div class="am-u-sm-9">
                                            <input type="password" name="password" class="tpl-form-input" id="password" placeholder="请输入6位银行卡密码">
                                            <small></small>
                                        </div>
                                    </div>

                                    <button type="button" class="am-btn am-btn-default am-radius" onclick="queryFlows();">查询</button>
                                    <button type="button" class="am-btn am-btn-default am-radius" onclick="downLoadFlow();">导出流水CSV</button>
                                    <button type="button" class="am-btn am-btn-default am-radius" onclick="downLoadFlowExcel();">导出流水Excel</button>

                                </form>



                                <div class="widget am-cf">
                            <div class="widget-head am-cf">
                                <div class="widget-title am-fl"></div>
                                <div class="widget-function am-fr">
                                   
                                </div>
                            </div>
                            <div class="widget-body  widget-body-lg am-fr">

                                <table width="100%" class="am-table am-table-compact am-table-striped tpl-table-black " id="example-r">
                                    <thead>
                                        <tr>
                                            <th>卡号</th>
                                            <th>金额</th>
                                            <th>备注</th>
                                            <th>时间</th>
                                      
                                        </tr>
                                    </thead>
                                    <tbody id="flows">

                                        <!-- more data -->
                                    </tbody>
                                </table>

                                    <button onclick="first()">首页</button>
                                    <button onclick="pre()">上一页</button>
                                    <button onclick="next()">下一页</button>
                                    <button onclick="last()">尾页</button>

                                <div id="pageInfo"></div>
         



                            </div>
                        </div>



                            </div>

                        </div>
                    </div>
                </div>

        

                    
                    
                </div>

               

 
                </div>



            </div>
        </div>
    </div>
    </div>


    <script>

        $('#flow').addClass('active');

        var currnetPage = 1;
        var totalPage = 1;

        function first() {
            currnetPage = 1;
            queryFlows();
        }
        function last() {
            currnetPage = totalPage;
            queryFlows();
        }

        function next() {
            if (currnetPage == totalPage) {
                return;
            }

            currnetPage ++;
            queryFlows();
        }

        function pre() {
            if (currnetPage == 1) {
                return;
            }

            currnetPage --;
            queryFlows();
        }
        (function queryMyCard() {
            dayuanit.ajax('/card/queryMyCard.do', {
            }, function (result) {
                var cards = result.data;
                var cardHtml = '<option value="no">请选择银行卡</option>';
                for (var i=0; i<cards.length; i++) {
                    var card = cards[i];
                    cardHtml += '<option value="'+card.cardId+'">'+card.cardNumber+'</option>';
                }

                $('#cards').html(cardHtml);
            })
        })();

        function queryFlows() {
            dayuanit.ajax('/flow/queryFlows.do', {
                cardId : $('#cards').val(),
                password : $('#password').val(),
                currentPage : currnetPage
            }, function (result) {
                var flows = result.data.data;
                var flowHtml = '';
                for (var i=0; i<flows.length;i ++) {
                    var flow = flows[i];
                    flowHtml += '<tr class="gradeX">\n' +
                        '                                            <td>'+flow.cardNumber+'</td>\n' +
                        '                                            <td>'+flow.amount+'</td>\n' +
                        '                                            <td>'+flow.remark+'</td>\n' +
                        '                                            <td>'+flow.createTime+'</td>\n' +
                        '                                        </tr>';
                }

                totalPage = result.data.totalPage;
                $('#pageInfo').html(currnetPage + '/' + totalPage);
                $('#flows').html(flowHtml);
            })
        }

        function downLoadFlow() {
            $('#flowForm').attr('action', '/flow/downLoadFlow.do')
            $('#flowForm').submit();
        }


        function downLoadFlowExcel() {
            $('#flowForm').attr('action', '/flow/downLoadFlowExcel.do')
            $('#flowForm').submit();
        }
    </script>

</body>

</html>